<template>
    <div class="contain">
        <div id="threedContent" class="threeDContainer"></div>
        <div>
            <button @click="startDraw">画图</button>
        </div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as THREE from 'three'

onMounted(()=>{

    startDraw();

})

const startDraw = ()=>{
    //1 创建3D场景对象Scene
    const scene = new THREE.Scene();

    //2 创建一个模型
    //2.1 创建一个长方体几何对象Geometry
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    //2.2 创建一个材质对象Material
    const material = new THREE.MeshBasicMaterial({
        color: 0xff0000,//0xff0000设置材质颜色为红色
    });
    //2.3 网格模型对象Mesh
    const mesh = new THREE.Mesh(geometry, material);
    //2.4 设置网格模型在三维空间中的位置坐标，默认是坐标原点
    mesh.position.set(0,0,0);

    //3场景中添加模型
    scene.add(mesh); 

    //4 实例化一个透视投影相机对象
    const cwidth = 800; //宽度
    const cheight = 500; //高度
    // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
    const camera = new THREE.PerspectiveCamera(90, cwidth / cheight, 1, 3000);
    //4.1 相机在Three.js三维坐标系中的位置,根据需要设置相机位置具体值
    camera.position.set(200, 200, 200);
    //4.2 相机观察目标指向Threejs 3D空间中某个位置
    camera.lookAt(mesh.position);//指向mesh对应的位置

    //5 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    //5.1 定义threejs输出画布的尺寸(单位:像素px)
    const width = 800; //宽度
    const height = 500; //高度
    renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
    
    //6 执行渲染操作
    renderer.render(scene, camera);

    //7 把canvas图渲染到HTML元素中
    document.getElementById('threedContent').appendChild(renderer.domElement);
   
}



</script>

<style lang="scss" scoped>
.contain{
    display: flex;
    justify-content: center;
    padding-top: 50px;
    .threeDContainer{
        width: 1000px;
        height: 800px;
        background: #eee;
    }
}
</style>